<template>
    <div>
        <table class="table" cellspacing="0" border="1">
            <thead>
                <tr>
                    <th>地区</th>
                    <th>新增确诊</th>
                    <th>累计确诊</th>
                    <th>治愈</th>
                    <th>死亡</th>
                </tr>
            </thead>
            <transition-group enter-active-class="animate__animated animate__flipInY" tag="tbody">
                <tr  v-for="item in store.item" :key="item.name">
                    <td class="td1">{{ item.name }}</td>
                    <td class="td1">{{ item.today.confirm }}</td>
                    <td class="td1">{{ item.total.confirm }}</td>
                    <td class="td1">{{ item.total.heal }}</td>
                    <td class="td1">{{ item.total.dead }}</td>
                </tr>
            </transition-group>
        </table>
    </div>
</template>

<script setup lang="ts">
import { useStore } from '../../stores/index'
const store = useStore();

</script>
<style lang="less" scoped>
    .td1{
        text-align: center;
    }
    .table{
        color: aliceblue;
        width: 100%;
        background: #212028;
        border: none;
        tr{
            th{
                padding: 5px;
                white-space: nowrap;
            }
            td{
                padding: 5px 10px;
                width: 100px;
                white-space: nowrap;
            }
        }
    }
</style>